<script lang="ts" setup>
import { defineProps, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Api } from '@/apis/index'
import { timeAbbreviation } from '@/utils/time'
import { useCounterStore } from '@/stores/counter'

import type { IsPn } from '@/TypingMore/HomeIsPn'

const props = defineProps<{
    rid: string
}>()

const store = useCounterStore()

const { browseRecords } = store

const router = useRouter()

const isPnData = ref<IsPn[]>([])

const getData = async () => {
    for (let i = 1; i < 4; i++) {
        let { data } = await Api.getOtherList(props.rid, i)
        isPnData.value = [...isPnData.value, ...data.data.archives]
        console.log('我被点击啦', data)
    }
}

const goToDetail = (bvid: string, is:IsPn ) => {
    let obj = {
        bvid: is.bvid,
        aid: is.aid,
        length: is.duration,
        title: is.title,
        play: is.stat.like,
        video_review: is.stat.view,
        pic: is.pic
    }
    browseRecords(obj)
    router.push(`/video/${bvid}`)
}

onMounted(() => {
    getData()
})
</script>

<template>
    <div>
        <div class="flex flex-wrap">
            <div v-for="is in isPnData" :key="is.bvid + is.aid" class="w-1/2 px-1 py-2" @click="goToDetail(is.bvid, is)">
                <div class="relative inline-block w-full">
                    <img :src="is.pic + '@480w_270h_1c'" alt="" class=" rounded-sm w-full">
                    <div style="background: linear-gradient(0deg,rgba(0,0,0,.85),transparent); width: 100%;"
                        class=" flex justify-between absolute bottom-0 left-0 text-white py-1 px-1.5 text-xs">
                        <div class=" flex items-center "><span class="iconfont icon-bofangshu mr-1.5"></span><span>{{
                        }}</span></div>
                        <div class=" flex items-center "><span class="iconfont icon-danmushu  mr-1.5"></span><span>{{
                        }}</span></div>
                    </div>

                </div>
                <div>
                    <p class="w-12/12 overflow-hidden text-ellipsis text-xs mt-1.5 text-black"
                        style="-webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; width: 100%;">
                        {{
        is.title
                        }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>